<!--
 * @Author: your name
 * @Date: 2020-07-07 11:37:03
<<<<<<< HEAD
 * @LastEditTime: 2020-07-10 11:41:05
=======
<<<<<<< HEAD
 * @LastEditTime: 2020-07-09 16:13:03
 * @LastEditors: Please set LastEditors
=======
 * @LastEditTime: 2020-07-09 15:07:28
>>>>>>> e03456cd25bb1307608611ded8f0509c63989c70
 * @LastEditors: Please set LastEditors
>>>>>>> 203cd2b07847be222c91003f03b18513f7e8ef2c
 * @Description: In User Settings Edit
 * @FilePath: \靖凯开源系统\jingkaisystem\src\pages\home\home.vue
--> 
<template>
  <div class="home">
    <div class="userinfo clearFix">
      <div class="sanjiao"></div>
      <div class="avatar clearFix">
        <i class="el-icon-user"></i>
      </div>
      <div class="info">
        <p class="name">{{userinfo.name}}</p>

        <p class="clzname">{{userinfo.cname}}</p>
      </div>
    </div>
    <div class="examinfo">
      <el-row>
        <el-col :lg="16" :md="16" :sm="16">
          <div class="mark">
            <div class="mark-cell">
              <div class="sanjiao-small"></div>
              <p>
                本月考试安排次数：
                <span>{{examNum}}</span>
              </p>

              <p>
                您已考试次数：
                <span>{{subexamNum}}</span>
              </p>
            </div>

            <div class="mark-cell">
              <div class="sanjiao-small"></div>
              <p>
                您的参考率：
                <span>{{subexamPer}}%</span>
              </p>
            </div>
          </div>

          <div class="table">
            <div class="sanjiao-small"></div>
            <p>成绩详情表</p>
            <div class="img">
              <img src="@/assets/img/loginbg.jpg" alt />
            </div>
          </div>
        </el-col>

        <el-col :lg="8" :md="8" :sm="8">
          <div class="table small">
            <div class="sanjiao-small"></div>
            <p>成绩曲线图</p>
            <div class="img">
              <img src="@/assets/img/logooo.jpg" alt />
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import stroage from "@/utils/storage.js";
import * as api1 from "@/api/apiList/home";
export default {
  data() {
    return {
      userinfo: [],
      examNum: 0, //本月安排考试次数
      subexamNum: 0, //已参加考试次数
      subexamPer: 0 //参考率
    };
  },
  methods: {
    async API_examNum(cid) {
      //获取考试次数
      let params = {
        cid
      };
      return await api1.examNum(this.qs.stringify(params));
    }
  },
  async created() {
    this.userinfo = stroage.get("userInfo"); //获取用户登录信息

    // console.log(this.userinfo)


    console.log(this.userinfo);
    let res2 = await this.API_examNum(this.userinfo.clzid);
    if (res2.data.statusCode == 200) {
      this.examNum = res2.data.content.examCount;
      this.subexamNum = res2.data.content.answerCount;
      this.subexamPer = parseInt((this.subexamNum / this.examNum) * 100);
    }
    console.log(res2);
  }
};
</script>

<style lang="scss">
.home {
  height: 95%;

  .userinfo:hover,
  .mark-cell:hover,
  .table:hover {
    box-shadow: 4px 4px 4px #666;
  }

  .userinfo {
    background: #0077af;
    width: 60%;
    margin: 0 auto 20px;
    letter-spacing: 2px;
    text-align: center;
    color: #eff;
    overflow: hidden;
    padding-bottom: 20px;

    .sanjiao {
      width: 0;
      height: 0;
      border-width: 40px 40px 0 0;
      border-style: solid;
      border-color: #003f79 transparent transparent transparent;
    }

    .avatar {
      float: left;
      margin-left: 100px;
      margin-top: -30px;

      background-color: #cccccc;
      border-radius: 50%;
      .el-icon-user {
        font-size: 60px;
        margin: 10px 10px;
      }
    }

    .info {
      float: left;
      margin-left: 50px;
      margin-top: -30px;
    }

    .name {
      font-size: 32px;
      vertical-align: top;
    }

    p {
      text-align: left;
      margin-bottom: 0;
    }
  }

  .sanjiao-small {
    width: 0;
    height: 0;
    border-width: 30px 30px 0 0;
    border-style: solid;
    border-color: #003f79 transparent transparent transparent;
  }

  .examinfo {
    width: 60%;
    margin: 0 auto;

    .mark {
      margin-bottom: 20px;

      .mark-cell {
        float: left;
        width: 48%;
        margin: 0 1%;
        background: #eff;

        p {
          padding-left: 50px;

          span {
            float: right;
            padding-right: 30px;
          }
        }
      }
    }

    .table {
      margin-top: 130px;
      clear: both;

      background: #eff;

      p {
        padding-left: 50px;
        border-bottom: 1px solid #888;
      }

      .img {
        img {
          width: 100%;
        }
      }
    }

    .small {
      margin-left: 15%;
    }
  }
}
</style>